<template>
  <div>
    <el-row :gutter="10" style="margin-top: 30px">
      <el-col :span="6"><div style="height: 100px"></div></el-col>
      <el-col :span="12">
        <div style="width: 21cm; height: 30px; text-align: right">
          <el-button type="primary" @click="print()"> 打印 </el-button>
          <el-button type="primary" @click="goback()"> 返回 </el-button>
        </div>
        <div
          ref="print_page"
          id="print_page"
          style="
            width: 21cm;
            height: 29.7cm;
            font-family: SimSun;
            font-size: 24px;
            box-sizing: border-box;
            padding: 50px;
            padding-top: 30px;
            padding-bottom: 0px;
            position: relative;
          "
        >
          <img
            style="width: 50px; height: 50px; border-radius: 50%"
            :src="image_url"
          /><span style="font-size: 16px; padding-left: 5px">{{
            office_name
          }}</span>
          <hr style="padding: 0; margin: 5px" />
          <div>
            <h1
              style="
                text-align: center;
                font-size: 34px;
                margin: 0 auto;
                margin-top: 40px;
                width: 75%;
              "
            >
              律师会见在押犯罪嫌疑人、被告人专用介绍信
            </h1>
          </div>
          <div style="text-align: right; padding: 60px; font-size: 16px">
            {{ form.code }}
          </div>
          <div
            style="
              padding-bottom: 30px;
              padding-right: 10px;
              letter-spacing: 2px;
            "
          >
            {{ form.court }}:
          </div>
          <div style="text-indent: 2em; line-height: 55px; letter-spacing: 2px">
            根据《中华人民共和国刑事诉讼法》第三十四条、第三十九条以及《中华人民共和国律师法》第三十三条的规定，我所{{
              form.lawyer
            }}律师前往你处会见{{ form.reason }}案的在押犯罪嫌疑人(被告人){{
              form.party
            }}。
          </div>
          <div style="text-indent: 2em; margin-top: 20px">特此函告!</div>
          <div style="text-align: right; padding: 10px; margin-top: 20px">
            {{ form.office_name }}
          </div>
          <div style="text-align: right; padding: 10px">
            {{ print_date }}
          </div>
          <div style="font-size: 20px; padding-top: 10px">
            律师姓名:<span style="padding-left: 30px">{{ form.lawyer }}</span>
          </div>
          <div style="font-size: 20px; padding-top: 10px" v-if="form.cert_no">
            执业证号:<span style="padding-left: 30px">{{ form.cert_no }}</span>
          </div>
          <div style="font-size: 20px; padding-top: 10px" v-if="form.id_card">
            身份证号:<span style="padding-left: 30px">{{ form.id_card }}</span>
          </div>
          <div style="font-size: 20px; padding-top: 10px" v-if="form.telephone">
            联系电话:<span style="padding-left: 30px">{{
              form.telephone
            }}</span>
          </div>
          <div style="font-size: 20px; padding-top: 10px" v-if="address">
            联系地址:<span style="padding-left: 30px">{{ address }}</span>
          </div>

          <div
            style="
              position: absolute;
              bottom: 100px;
              font-size: 20px;
              text-align: center;
              width: 90%;
            "
          >
            (本介绍信用于会见犯罪嫌疑人、被告人时向看守所、羁押场所提交)
          </div>
          <div
            style="position: absolute; bottom: 20px; width: 90%; padding: 5px"
          >
            <hr />
            <p style="font-size: 16px; text-align: center">
              地址：{{ address }} 电话: {{ telephone }}
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import logo from "@/assets/logo.png";
import printJS from "print-js";
import { officeOne } from "@/api/office";
import { getIntroduceById } from "@/api/case";
import { getCurDate } from "@/utils/datetime";
export default {
  components: {},
  props: {
    intro_id: String,
  },
  data() {
    return {
      image_url: logo,
      form: {},
      office_name: "",
      address: "",
      telephone: "",
      print_date: getCurDate("YYYY年MM月DD日"),
    };
  },
  watch: {},
  computed: {},
  methods: {
    getIntroduce() {
      getIntroduceById(this.intro_id)
        .then((res) => {
          console.log(res);
          this.form = res;
        })
        .catch((error) => {
          this.$message.error("读取介绍信数据失败");
        });
    },
    getOffice() {
      officeOne().then((res) => {
        console.log(res);
        if (res.length > 0) {
          this.office_name = res[0].name;
          this.address = res[0].address;
          this.telephone = res[0].telephone;
        }
      });
    },
    print() {
      const style =
        "@page { margin-top: 40px } @media print { h1 { color: blue;} }";
      printJS({
        printable: "print_page",
        type: "html",
        style: style,
        scanStyles: false,
      });
    },
    goback() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getOffice();
    this.getIntroduce();
  },
};
</script>

<style  scoped>
/* @page {
  margin: 2.5cm;
  size: a4 portrait;
} */
.el-col {
  border: 1px solid transparent;
}
#print_page {
  border: 1px solid #ccc;
  margin: 30px 0;
}
</style>

